<script setup>
import api from '@/utils/api'
import { Snackbar } from '@varlet/ui'
import { ref } from 'vue'
</script>
<script>
export default {
  data() {
    return {
      loading: ref(false),
      information: ref({
        phone: '', // 手机号
        wx: '', // 微信
        qq: '', // QQ
        email: '' // 邮箱
      }), // 联系方式对象
      genderCode: ref(1), // 性别
      userInfo: ref({
        nickname: '',
        otherDesc: '',
        description: ''
      })
    }
  },
  methods: {
    submit() {
      if (this.checkSubmitData()) {
        this.loading = true // 显示加载状态
        // 组装数据
        this.userInfo.gender = this.genderCode
        this.userInfo.information = JSON.stringify(this.information)
        api.post('/insert', this.userInfo).then((response) => {
          this.loading = false // 关闭加载状态
          if (response.data.statusCode === 2000) {
            // 提示
            Snackbar({
              type: 'success',
              content: '提交成功',
              duration: 1000
            })
            location.href = '/' // 跳转到首页
          } else {
            // 提示
            Snackbar({
              type: 'error',
              content: '提交失败，请稍后再试',
              duration: 1000
            })
          }
        })
      }
    },
    // 检查必填项
    checkSubmitData() {
      if (
        this.userInfo.nickname &&
        (this.information.phone ||
          this.information.wx ||
          this.information.qq ||
          this.information.email)
      ) {
        return true
      }
      // 提示
      Snackbar({
        type: 'info',
        content: '请填写必填项',
        duration: 1000
      })
      return false
    }
  }
}
</script>

<template>
  <div id="insert">
    <var-loading description="正在提交..." :loading="loading">
      <var-card title="个人信息">
        <template #description>
          <var-space direction="column" size="large" style="padding: 15px">
            <var-input
              size="small"
              variant="outlined"
              placeholder="请输入名字/昵称【必填】"
              clearable
              v-model="userInfo.nickname"
            />
            <var-input
              size="small"
              variant="outlined"
              placeholder="请输入一句话/座右铭"
              clearable
              v-model="userInfo.otherDesc"
            />
            <var-input
              size="small"
              variant="outlined"
              placeholder="请输入个人简介/想说的话"
              clearable
              textarea
              v-model="userInfo.description"
            />
            <span>联系方式【必填一个以上】：</span>
            <var-input
              size="small"
              variant="outlined"
              type="number"
              placeholder="请输入手机号"
              clearable
              v-model="information.phone"
            />
            <var-input
              size="small"
              variant="outlined"
              placeholder="请输入微信号"
              clearable
              v-model="information.wx"
            />
            <var-input
              size="small"
              variant="outlined"
              type="number"
              placeholder="请输入QQ号"
              clearable
              v-model="information.qq"
            />
            <var-input
              size="small"
              variant="outlined"
              placeholder="请输入邮箱"
              clearable
              v-model="information.email"
            />
            <span>性别：</span>
            <var-radio-group v-model="genderCode">
              <var-radio :checked-value="1">男</var-radio>
              <var-radio :checked-value="2">女</var-radio>
              <var-radio :checked-value="0">未知</var-radio>
            </var-radio-group>
            <var-button type="primary" block @click="submit">提交</var-button>
          </var-space>
        </template>
      </var-card>
    </var-loading>
  </div>
</template>

<style></style>
